Creating, opening and saving layouts

Creating and opening layouts

The first step in using Layout Master is to create a new layout.

To create a new layout

1. choose New Layout from the File menu

A new page layout window opens. Below we describe this window in detail.

A page layout is essentially an HTML document with an embedded style sheet (this is compatible with GoLive). You can also save Layouts as HTML documents with a linked style sheet, or even HTML documents with inline style (for compatibility with DreamWeaver.) We'll see how to do this below.

The page layout window

The page layout window is where you edit your page layout. Looking at it, you'll see rulers along the left and top edges, and a background grid. These are all user configurable, using the Layout Grid editor. With this editor you can change the units that are used for the ruler and grid, as well as whether or not you a want to see grid lines, and even the separation in various units between grid lines.

In the bottom right hand corner of the layout window, you'll see a popup menu. This is the window width chooser. You can use this to set the width of the layout window to some very common browser widths.

figure 1: the Layout Window

Saving Layouts

HTML + CSS page layouts can be saved as

HTML documents with a style sheet embedded in their heads (This is compatible with GoLive from Adobe Systems)
as an HTML document linked to a separate style sheet
as an HTML document with inline styles. This is for maximum DreamWeaver compatibility (DreamWeaver will read layouts with embedded style sheets, but when changes are made, it produces inline styles)

Using Layout Master you can do any of these. Each can be appropriate depending on the circumstance, but we have chosen Embedded layout as the default.

To save a page layout

1. choose Save from the File menu

2. if the page layout has not yet been saved, a Save dialog box opens.

3. in the dialog box, give the page layout a name, and choose where to save it

4. choose which kind of page layout it will be saved as, using the popup menu at the bottom of the window.

5. click Save

6. if you chose Linked Layout, you will be asked where you want to save the style sheet. Repeat step 3 for the style sheet, and click Save

The page layout as well as the separate style sheet when relevant will be saved.

You can also save an existing layout as another type of layout using Save As...

To save an existing layout as an embedded style sheet

1. choose Save As... from the File menu

2. choose Embedded Layout from the popup menu at the bottom of the Save dialog box

3. click Save

To save an existing layout as a linked style sheet

1. choose Save As... from the File menu

2. choose Linked Layout from the popup menu at the bottom of the Save dialog box

3. click Save

4. a second Save dialog box opens. enter then name of the linked style sheet to be saved, and choose its location, then click Save

To save an existing layout with inline styles (DreamWeaver compatibility)

1. choose Save As... from the File menu

2. choose Inline Layout from the popup menu at the bottom of the Save dialog box

3. click Save

A copy in the format you were working on will be saved, and you will continue working in the new format.

next: Layout Master editors